<template>
    <button
      class="menu-item"
      :class="{ 'is-active': props.isActive ? props.isActive() : null }"
      @click="props.action"
      :title="props.title"
      >
      <SvgIcon class="svg" :name="props.icon"/>
        
    </button>
</template>
  
<script setup lang="ts">
import { isActive } from '@tiptap/vue-3';
import {ref} from 'vue'
import SvgIcon from './SvgIcon.vue';

    const baseUrl = ref("assets/icons");
    const props = defineProps(
        {
            icon: { type: String, default: '' },
            title: { type: String, default: '' },
            action: { type: Function, default: () => {} },
            isActive: { type: Function, default: () => {}}
        
        }
    )
</script>
  
<style scoped>
.menu-item {
    background: transparent;
    border: none;
    border-radius: 0.4rem;
    color: #333;
    cursor: pointer;
    height: 1.75rem;
    padding: 0.25rem;
    margin-right: 0.25rem;
    width: 1.75rem;

    svg {
    fill: currentColor;
    height: 100%;
    width: 100%;
    }

    &.is-active,
    &:hover {
    background-color: #d6d6d6;
    }
}

</style>
